<template>
    <div id="register">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form :model="registerForm" :rules="rules" class="register-container" size="medium" @keyup.enter.native="handleClick">
                <h3 class="register_title">注册11</h3>
                 

                <el-form-item prop="username" >
                    <el-input type="text" v-model="registerForm.username" autofocus ref="username"
                              auto-complete="off" placeholder="用户名" prefix-icon="el-icon-user-solid" spellcheck="false">
                    </el-input>
                </el-form-item>

                <el-form-item prop="mobile" >
                    <el-input type="text" v-model="registerForm.mobile" autofocus ref="mobile"
                              auto-complete="off" placeholder="电话" prefix-icon="el-icon-phone" spellcheck="false">
                    </el-input>
                </el-form-item>

                <el-form-item prop="email" >
                    <el-input type="text" v-model="registerForm.email" autofocus ref="email"
                              auto-complete="off" placeholder="邮箱 " prefix-icon="el-icon-message" spellcheck="false">
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type="password" v-model="registerForm.password"  show-password autofocus ref="password"
                              auto-complete="off" placeholder="密码" prefix-icon="el-icon-key" v-on:input="change">
                    </el-input>
                </el-form-item>


                <el-form-item style="width: 100%;">
                    <el-checkbox class="service_terms" v-model="checked" >
                        <!-- <span style="color: #409EFF"></span> -->
                        <label style="color: #949493">我已阅读并同意相关服务条款和政策隐私</label>
                    </el-checkbox>
                </el-form-item>
           
               
                <el-form-item>
                  <el-button type="primary" icon="el-icon-upload" @click="registerFor()">注册账号1</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <p class="register-copyright">© 2021 Lemon 版权所有</p>
    </div>
</template>


<script>
import axios from "axios";
export default {
  name: "register",
  data() {
    return {
      registerForm: {
        username: "",
        mobile: "",
        email: "", 
        password: ""
      },
    };
  },
  // created() {
  //   // console.log($);
  //   // console.log("1111");
  // },
  methods: {
    registerFor() {
      if (!this.registerForm.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.registerForm.email) {
        this.$message.error("请输入邮箱！");
        return;
      } else if (this.registerForm.email != null) {
        var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(this.registerForm.email)) {
          this.$message.error("请输入有效的邮箱！");
        } else if (!this.registerForm.password) {
          this.$message.error("请输入密码！");
          return;
        } else {
          // this.$router.push({ path: "/" }); //无需向后台提交数据，方便前台调试
          axios
            .post("api/register", {
              username: this.registerForm.username,
              email: this.registerForm.email,
              password: this.registerForm.password
            })
            .then(res => {
              if (res.data.status === 200) {
                this.$router.push({ path: "/" });
              } else {
                alert("您输入的用户名已存在！");
              }
            });
        }
      }

      
    }
  }
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 背景图片 */
#register {
   background-image: url('../assets/picture/background.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
   width: 100%;
   position: fixed;
}
/* 注册边框图 */
.register-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 10% 40% 0 40%;
    width: 20%;
    padding: 25px 30px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    opacity: 0.7;
}

/* 注册 */
.register_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

/* 版权所有 */
.register-copyright {
    color: rgba(175, 168, 168, 0.438);
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}
@media screen and (min-height: 550px) {
    .register-copyright {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }
}

</style>